<div class="grid_3 alpha mainMenu">
	<?= $this->widget('navigation', 'navigation', array('menu_id' => 1));?>
</div>
<div class="grid_9 news">
	<?php if($this->photos->count() > 0):?>
		
		<div class="gallery">
			<div class="main_pic">
				<?php //echo $this->ImageTag('/upload/media/pictures/gallery/medium/' . $this->photos[0]->photo, $this->photos[0]->Translation[$this->LANG]->name, "reflect piccenter");?>
				<?php echo $this->ImageTag($this->STATIC_SERVER . '/reflect3.php?img=upload/media/pictures/gallery/medium/' . $this->photos[0]->photo . '&height=33%&fade_start=44%', $this->photos[0]->Translation[$this->LANG]->name, "reflect_main piccenter");?>
			</div>
			<div class="carouselli">
				<a href="#" class="jcArrLeft"></a>
				<div class="car_wrap">
					<div class="jcarousel">
						<ul>
							<?php foreach ($this->photos as $photo):?>
								<li>
									<!-- <img src="<?= $this->STATIC_SERVER;?>/reflect3.php?img=upload/media/pictures/gallery/small/<?= $photo->photo; ?>" id="img_<?= $photo->id; ?>" /> -->
									<?= $this->ImageTag('/upload/media/pictures/gallery/small/' . $photo->photo, $photo->Translation[$this->LANG]->name, "reflect", "img_" . $photo->id);?>
								</li>
							<?php endforeach;?>
						</ul>
					</div>
				</div>
				<a href="#" class="jcArrRight"></a>
			</div>	
		</div>
		<div class="clearfix"></div>
	<?php else:?>
		<p><?= $this->translate('In the gallery there are no photos');?></p>
	<?php endif;?>
</div>
<script type="text/javascript">

$(document).ready(function(){
	$(".jcarousel").jCarouselLite({
		mouseWheel: true,
		visible: 5,
		btnNext: ".jcArrLeft",
		btnPrev: ".jcArrRight"
	});
	//$(".reflect").reflect({opacity: 0.5});
	
	$(".jcarousel img").click(function(){
		var str_id = $(this).attr('id');
		var id = str_id.substr(4);

		
		$(".main_pic img").fadeOut(function(){
			$(".main_pic").append('<p id="wait"><?= $this->translate('Loading...');?></p>');
			$.post('<?= $this->url(array(),'gallery_index_getimg');?>',{"id":id},function(data){

				var obj = $.parseJSON(data);
				
				var image = new Image();
				image.src = '/reflect3.php?img=upload/media/pictures/gallery/medium/' + obj.src + '&height=33%';
				$(image).load(function(){
					$(".main_pic img").attr('src', image.src);
					$(".main_pic img").attr('height',obj.height);
					$(".main_pic img").attr('width',obj.width);
					
					$(".main_pic p").remove();
					$(".reflect_main").fadeIn();
					//$(".main_pic img").fadeIn(function(){});
					
				});
				
			});

		});
	});
});
</script>